<script setup lang="ts">
const { waterForm } = defineProps<{
  waterForm: Object; // 定义采样时间的类型
}>();

// 存储计算结果的数组
const computedResults = ref([null, null, null, null]);
// const handleBlur = (index) => {
//   // 动态获取对应的 `kb_cdzX` 和 `kb_xdpcX`
//   const kb_cdzX = waterForm.bdatas.kbycd_fx[`kb_cdz${index}`];
//   const kb_cdzNext = waterForm.bdatas.kbycd_fx[`kb_cdz${index + 1}`];
//
//   // 如果当前和下一个值都不为空，进行计算
//   if (kb_cdzX !== null && kb_cdzNext !== null) {
//     // 计算公式 (kb_cdzX - kb_cdzNext) / (kb_cdzX + kb_cdzNext) * 100
//     console.log(kb_cdzX, kb_cdzNext)
//     const result = ((kb_cdzX - kb_cdzNext) / (kb_cdzX + kb_cdzNext)) * 100;
//     console.log(result)
//     computedResults.value[index] = result; // 保存结果到计算结果数组中
//     waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`] = result; // 更新对应的 `kb_xdpcX` 值
//   }
// };
</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <h1 style="text-align: center">
        环境空气和废气 电感耦合等离子体质谱法分析原始记录（B面）
      </h1>
      <div>SXLPHJ/JL/CX-22-75</div>
      <div style="display: flex">
        <table class="table">
          <tr>
            <td colspan="5" style="text-align: center">溶液配制</td>
          </tr>
          <tr>
            <td>标准贮备液批号</td>
            <td>标准贮备液浓度</td>
            <td>贮备液有效日期</td>
            <td>标准使用液浓度</td>
            <td>配置日期</td>
          </tr>
          <!-- 溶液配置 -->
          <tr v-for="(item, index) in waterForm.bdatas.rypz" :key="index">
            <td>
              <el-input
                v-model="item.bzzbyph"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.bzzbynd"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.zbyyxrq"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.bzsyynd"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="item.pzrq"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
        <table class="table">
          <tr>
            <td colspan="8" style="text-align: center">标准曲线</td>
          </tr>
          <tr>
            <td>元素</td>
            <td colspan="7">
              <el-input
                v-model="waterForm.bdatas.bzqx.ys1"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td>编号</td>
            <td>标准空白</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>标准使用液加入量（mL）</td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy1"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy2"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy3"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy4"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy5"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy6"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzsyy7"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td>标准物质浓度（μg/L）</td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd1"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd2"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd3"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd4"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd5"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd6"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
            <td>
              <el-input
                v-model="waterForm.bdatas.bzqx.bzwznd7"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
          <tr>
            <td>校准曲线(y=a+bx)，r</td>
            <td colspan="4">曲线信息见 第 页至 页</td>
            <td>定容体积</td>
            <td colspan="2">
              <el-input
                v-model="waterForm.bdatas.bzqx.drtj"
                style="width: 100%; border: 1px solid transparent"
                placeholder="请输入"
              />
            </td>
          </tr>
        </table>
      </div>
      <table class="table">
        <tr>
          <td colspan="6">元素</td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.ys.ys1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.ys.ys2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.ys.ys3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.ys.ys4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              检出限(
              <el-input v-model="waterForm.unit.jcx" placeholder="请输入" />
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.jcx[`ys${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定下限(
              <el-input v-model="waterForm.unit.cdxx" placeholder="请输入" />
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.cdxx[`cdxx${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="6">重复性限值r</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.cfxxz[`cfxxz${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="3">校核点</td>
          <td colspan="3" rowspan="3">
            <el-input
              v-model="waterForm.bdatas.jhd.ypbh"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input v-model="waterForm.unit.jhd_cdz" placeholder="请输入" />
              )
            </div>
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.cdz1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.cdz2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.cdz3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.cdz4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">相对误差</td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.xdpc1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.xdpc2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.xdpc3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.xdpc4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.sfhg1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.sfhg2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.sfhg3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.jhd.sfhg4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="8">空白样测定</td>
          <td colspan="3" rowspan="2">校准空白</td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input
                v-model="waterForm.unit.kbycd_cdz"
                placeholder="请输入"
              />
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`jzkb_cdz${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`jzkb_sfhg${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="4">空白1(室)与 空白2(室)</td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input
                v-model="waterForm.unit.kbycd_cdz1"
                placeholder="请输入"
              />
              )
            </div>
          </td>
          <td v-for="(item, index) in 8" :key="index">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`kb_cdz${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
              @blur="handleBlur(index)"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 8" :key="index">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`kb_sfhg${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差(%)</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <!-- <el-input
              v-model="waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
              :value="computedResults[index]"
            /> -->
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`kb_xdpc${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">相对偏差是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`kb_xdpcsfhg${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="3" rowspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx.ypbh"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input
                v-model="waterForm.unit.kbycd_cdz2"
                placeholder="请输入"
              />
              )
            </div>
          </td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`yp_cdz${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">是否合格</td>
          <td v-for="(item, index) in 4" :key="index" colspan="2">
            <el-input
              v-model="waterForm.bdatas.kbycd_fx[`yp_sfhg${index}`]"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td rowspan="3">平行样</td>
          <td colspan="3" rowspan="3">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.ypbh"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input v-model="waterForm.unit.pxy_cdz" placeholder="请输入" />
              )
            </div>
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz5"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz6"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz7"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.cdz8"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              测定值(
              <el-input v-model="waterForm.unit.pxy_r" placeholder="请输入" />
              )
            </div>
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.xdpc1"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.xdpc2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.xdpc3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.xdpc4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">r是否合格</td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.sfhg1"
              style="
                width: 100%;
                border: 1px solid transparent;
                align-items: center;
              "
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.sfhg2"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.sfhg3"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
          <td colspan="2">
            <el-input
              v-model="waterForm.bdatas.pxycd_fx.sfhg4"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
        <tr>
          <td colspan="4">备注</td>
          <td colspan="16">
            <el-input
              v-model="waterForm.bdatas.bnotes"
              style="width: 100%; border: 1px solid transparent"
              placeholder="请输入"
            />
          </td>
        </tr>
      </table>
    </el-card>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
  text-align: center;
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
}

.table td {
  width: 1%;
}

.table-td {
  display: flex;
  justify-content: center;
  font-weight: 500;
  color: #303133;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
